import React from "react";
import { Outlet, Link } from "react-router-dom";
import styles from './index.module.scss'
import headerImg from '@/assets/incon.png';
import frinds from '@/assets/friends.png'
import notice from '@/assets/notice.png'
import amount from '@/assets/amount.png'

const Index = () => {

  return (

    <div className = {styles.content}>
      <div className = {styles.homeTop}>
        <div className = {styles.information}>
          <div className = {styles.headPortrait} >
            <img src = {headerImg} alt="加载失败"/>
          </div>
          <div className = {styles.name}><span>一拳超人</span></div>
          <div className = {styles.introduce}><span>我变秃了，也变强了</span></div>
        </div>
        <div className = {styles.friends}>

           <img src={frinds}  alt="加载失败"/> <span>好友</span>
        </div>
        <div className = {styles.notice}>
          <img src={notice}  alt="加载失败"/> <span>消息</span>
        </div>
      </div>
      <div className = {styles.homeBottom}>
        <div className = {styles.modeBox}>
         <div className = {styles.praticeMode}>
          <span><Link to = "/practice">单击练习模式</Link></span>
         </div>
         <div className = {styles.passMode}>
          <div className = {styles.mode}>
               <span>闯关模式</span>
            </div>
          <div className = {styles.achievement}>
              <span>天梯成就</span>
          </div>
         </div>
         <div className = {styles.pkMode}>
          <div className = {styles.mode}>
              <span>PK模式</span>
            </div>
          <div className = {styles.achievement}>
            <span>PK成就</span>
          </div>
         </div>
         <div className = {styles.designMode}>
          <div className = {styles.mode}>
              <span>设计模式</span>
           </div>
          <div className = {styles.achievement}>
            <span>设计师成就</span>
          </div>
         </div>
        </div>
        <div className = {styles.shop}>
          <div className = {styles.title} >
            <span>商店</span>
          </div>
          <div className = {styles.amount}>
            <span>555000</span> <img src = {amount}  alt="加载失败"/> 
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
